<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Learn!</title>
    <script th:src="@{/webjars/jquery/3.2.1/dist/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/static/css/style.css}" />
</head>
<body>
    <h1>Hello, Thymeleaf!</h1>
    <img id="img1" alt="看到我说明图片挂了..." th:src="@{/static/imgs/boy.jpg}" title="小哥哥"
        width="100px" height="100px" class="rounded-circle" />
    <button id="btn1" class="btn btn-info">Click Me!</button>
    <div id="div1"></div>
    <script type="text/javascript">
        $("#btn1").click(function() {
            console.log("被点了");
            let val = $("#div1").html();
            if(val.length == 0) {
                $("#div1").html("哎呀，被发现了...").css({"color":"silver","font-size":"24px"});
                $("#img1").attr({"src":"[[@{/}]]/static/imgs/girl.jpg", "title":"小姐姐"});
            }else if(val != "") {
                $("#div1").html("");
                $("#img1").attr({"src":"[[@{/}]]/static/imgs/boy.jpg", "title":"小哥哥"});
            }
        });
    </script>
    <hr />
    <h1>链接表达式</h1>
    <div>
        <a th:href="@{https://www.baidu.com}">去百度</a><br />
        <a th:href="@{/web/demo1(id=1, name='Albert')}">去Demo1</a><br />
        <a th:href="@{/web/demo2/{id}(id=4)}">去Demo2</a>
    </div>
    <hr />
    <form th:action="@{/file/upload}" method="post" enctype="multipart/form-data">
        <input type="file" name="myFile" /><br />
        <input type="submit" value="上传" />
    </form>
</body>
</html>